<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css样式思路：
				 1.统配选择器：微软雅黑，#f5f5f5 浅灰，外边距至0
				 2.#product_card；边框 内边距，外边距，阴影【透明.1】，文字居中
				 3.img；边框倒角，内外边距？【微调】
				 4.h3：颜色，内外边距？
				 5.p：字体大小，颜色
				 6.p+span:span：内外边距？
				 */
				{
					font-family: "微软雅黑";
					background-color: #f5f5f5;
					margin: 0;
				}
				#product_card {
				            box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1); 
							width: 250px;
				            padding: 10px; 
				            margin: 30px; 
				            text-align: center;
							}
				img{
					border-radius: 10px;
				}
				h3{
					
				}
				h3+p{
					color: #ff0000;
					font-size: 21px;
				}
				h3+p~p{
					color: #989994;
					font-size: ;
				}
		</style>
	</head>
	<body>
		<!--网页:1.html结构【原生图分析】-->
		<div id="product_card">
			<img src="img/小米su7.jpg"width="250px"height="200px"  alt="汽车" />
			<h3>小米SU7</h3>
			<p>￥279999.00</p >
			<p>已有<span> 10万+ </span>评价</p >
		</div>
	</body>
</html>